
$gray:#BAE5E8;
$blue:#00ECFF;
$darkblue:#0084ff;
$lightblue:#00FFCC;
$yellow:#FFD200;
$pink:#FD8395;
$border:#306CA6;
.color-pink{
  color: $pink;
}
.color-yellow{
  color: $yellow;
}
.color-lightblue{
  color: $lightblue;
}
.color-darkblue{
  color: $darkblue;
}
.border-pink{
  border: 1px solid $pink;
}
.border-yellow{
  border: 1px solid $yellow;
}
.border-lightblue{
  border: 1px solid $lightblue;
}
.border-darkblue{
  border: 1px solid $darkblue;
}
.bg-pink{
  background: rgba(255, 131, 149, 0.1);
}
.bg-yellow{
  background: rgba(255, 239, 0, 0.1);
}
.bg-lightblue{
  background: rgba(0, 255, 204, 0.1);
}
.bg-pink-deep{
  background: $pink
}
.bg-yellow-deep{
  background: $yellow;
}
.bg-lightblue-deep{
  background: $darkblue;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cursor-pointer{
  cursor: pointer;
}
.el-row{

  height: 100%;
}
.el-col{
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.container{
    background: url('../assets/img/bg.png');
    width: 100vw;
    /* height: 100vh; */
    background-size: cover;
    
}
.card-body,.card-body-content{
  font-size: 14px;
}
.head{
    height: 112px;
    overflow: hidden;
    // padding: 0 0.780px;
    position: relative;
    // background: url('../assets/img/head.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 1%;
    img{
      max-height: 100%;
    }
    .right-box{
      position: absolute;
      right: 16px;
      top: 50%;
      font-size: 16px;
      transform: translateY(-50%);
      text-align: right;
      .time{
        color: $gray;
        margin-top: 8px;
      }
      .link{
        color: $blue;
        font-size: 16px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
      }
    }
}
.body{
    height: calc(100vh - 112px);
    box-sizing: border-box;
    padding: 0 10px;
     
}
.card1{
  /* width: 30vw; */
  height: 160px;
  .card-body{
    height: calc(100% - 48px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
      // color: #BAE5E8;
      .value{
        font-size: 32px;
        font-weight: bold;
      }
    }
  }
}
.card2{
  margin-top: 16px;
  height: calc((100% - 3*16px - 160px)/2);
  .card-body{
    height: calc(100% - 48px);
    &-head{
      height: 32px;
      // margin-top: 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      
      div{
        border: 2px solid transparent;
        padding-bottom: 4px;
        cursor: pointer;
        &.active{
          color: $blue;
          border-bottom-color: #00ECFF;
        }
      }
      
    }
    &-content{
      height: calc(100% - 32px);
    }
    
  }
}
.card3{
  margin-top: 16px;
  height: calc((100% - 3*16px - 160px)/2);
  .card-body{
    height: calc(100% - 48px);
  }
}
.card4{
  // height: calc((100% - 148px)/2 + 116px);
  height:  calc((100% - 3*16px - 160px)/2 + 160px + 16px);
  .card-body{
    height: 100%;
    &-head{
      position: absolute;
      z-index: 999;
      left: 28.8px;
      top: 0;
      .item{
        margin: 16px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .label{
          line-height: 1;
        }
        .value{
          font-size: 30px;
        }
      }
    }
    &-content{
      height: 100%;
    }
  }
}
.box56{
  height: calc(100% - 16px - ((100% - 3*16px - 160px)/2 + 160px + 16px));
  display: flex;
  justify-content: space-between;

}
.card5{
  margin-top: 16px;
  width: calc((100% - 16px)/2);
  height: calc(100% - 16px);
  .card-body{
    height: calc(100% - 48px);
    &-head{
      position: relative;
      top: -8px;
      height: 1.8rem;
      line-height: 1.80px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      .item{
        margin-right: 16px;
        .dot{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 0.280px;
        }
      }
    }
    &-content{
      height: calc(100% - 1.8rem);
      font-size: 14px;
      .label,.aqi,.wet,.pm25,.pm10,.tsp,.noise{
        display: inline-block;
        text-align: center;
      }
      .label{
        
        width: 40%;
        text-align: left;
        padding-left: 4px;
      }
      .aqi{
        width: 10%;
      }
      .wet{
        width: 10%;
      }
      .pm25{
        width: 10%;
      }
      .pm10{
        width: 10%;
      }
      .tsp{
        width: 10%;
      }
      .noise{
        width: 10%;
      }
      .header{
        height: 40px;
        // line-height: 40px;
        display: flex;
        align-items: center;
        background: rgba(13, 230, 249, 0.11);
      }
      .list-item{
        height: calc((100% - 40px)/5);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(68, 241, 255, 0.15);
        &:nth-last-of-type(1){
          border: none;
        }
        &.excellent{
          color: $darkblue;
        }
        &.common{
          color: $yellow;
        }
        &.unqualified{
          color: $pink;
        }
      }
      span{
      }
    }
  }
}
.card6{
    width: calc((100% - 16px)/2);
    margin-top: 16px;
    height: calc(100% - 16px);
    .card-body{
      height: calc((100% - 48px));
    }
}
.card7{
   height: calc((100% - 16px));
   .card-body1{
      border-bottom: 1px solid $border;
      box-sizing: border-box;
      height:  160px;
      .card-body-head{
        height: 48px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        div{
          border: 2px solid transparent;
          padding-bottom: 4px;
          cursor: pointer;
          &.active{
            color: $blue;
            border-bottom-color: #00ECFF;
          }
        }
        
      }
      .card-body-content{
        height: calc(100% - 48px);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item{
          // color: #BAE5E8;
          .value{
            font-size: 32px;
            font-weight: bold;
          }
        }
      }
    }
    .card-body2{
      border-bottom: 1px solid $border;
      box-sizing: border-box;
      height: calc((100% - 160px)/2);
      .card-body{
        height: calc(100% - 48px);
        &-head{
          height: 32px;
          // margin-top: 8px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          
          div{
            border: 2px solid transparent;
            padding-bottom: 4px;
            cursor: pointer;
            &.active{
              color: $blue;
              border-bottom-color: #00ECFF;
            }
          }
          
        }
        &-content{
          height: calc(100% - 32px);
        }
      }
    }
    .card-body3{
      box-sizing: border-box;
      height: calc((100% - 160px)/2);
      .card-body-content{
        height: calc(100% - 48px);
      }
    }
  
}